<template>
    <div>
        <el-page-header content="添加用户" icon="" title="用户管理"></el-page-header>
        <el-form ref="userFormRef" :model="userForm" :rules="userFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userForm.password" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item label="权限" prop="role">
                <el-select v-model="userForm.role" placeholder="Select" style="width: 100%;">
                    <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="userForm.gender" placeholder="Select" style="width: 100%;">
                    <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="个人简介" prop="introduction">
                <el-input type="textarea" v-model="userForm.introduction" resize="none" maxlength="50" placeholder="请输入个人简介"
                    show-word-limit />
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <Upload :avatar="userForm.avatar" @uploadChange="handleChange"></Upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">添加用户</el-button>
            </el-form-item>
        </el-form>



    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import Upload from '@/components/upload/Upload'
import { ElMessage } from 'element-plus'
import upload from '@/util/upload';
import { useRouter } from 'vue-router';

const router = useRouter()

// 关联userForm表单ref
const userFormRef = ref()
// 双向绑定userForm表单数据
const userForm = reactive({
    username: "",
    password: "",
    role: 2,// 1为管理员 2为编辑
    gender: 0,// 0为保密，1为男，2为女
    introduction: "",
    avatar: "",
    file: null
})

// 定义规则校验
const userFormRules = reactive({
    username: [
        { required: true, message: '请输入你的名字', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入你的密码', trigger: 'blur' },
    ],
    role: [
        { required: true, message: '请选择权限', trigger: 'blur' },
    ],
    gender: [
        { required: true, message: '请选择你的性别', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入个人简介', trigger: 'blur' },
    ],
    avatar: [
        { required: true, message: '请上传头像', trigger: 'blur' },
    ],

})
// 权限选择字段
const roleOptions = [
    {
        label: "管理员",
        value: 1
    },
    {
        label: "编辑",
        value: 2
    },
]
// 性别选择字段
const genderOptions = [
    {
        label: "保密",
        value: 0
    },
    {
        label: "男",
        value: 1
    },
    {
        label: "女",
        value: 2
    },
]

// 选择完图片的回调
const handleChange = (file) => {
    userForm.avatar = URL.createObjectURL(file)
    userForm.file = file
}

const submitForm = () => {
    userFormRef.value.validate(async (valid) => {
        if (valid) {
            // console.log(userForm);
            const result = await upload("/adminapi/user/add", userForm)
            // console.log(result);
            if (result.ActionType === 'OK') {
                ElMessage.success("用户添加成功")
                router.push('/user-manage/userlist')
            } else {
                ElMessage.error(result.errorMsg)
            }


        } else {
            ElMessage.error("添加用户失败")
        }
    })
}
</script>


<style lang="scss" scoped>
.demo-ruleForm {
    margin-top: 50px;
}
</style>